<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>预算列表</title>
	<meta name="decorator" content="default"/>
	<script src="${ctxStatic}/echart/echarts.min.js"></script>
	<style type="text/css">
		.tb1th{
			padding-left: 30px !important;
			padding-right: 30px !important;
		}
		/*.breadcrumb{*/
			/*background-color: white;*/
		/*}*/
		#tableDiv{
			max-width: 100%;
			overflow-x: scroll;
		}
	</style>
	<script type="text/javascript">
		$(document).ready(function() {
			$("#btnExport").click(function(){
				top.$.jBox.confirm("确认要导出用户数据吗？","系统提示",function(v,h,f){
					if(v=="ok"){
						$("#searchForm").attr("action","${ctx}/oa/budget/exportBudget");
						$("#searchForm").submit();
						$("#searchForm").attr("action","${ctx}/oa/budget/listBudgetEdit");
					}
				},{buttonsFocus:1});
				top.$('.jbox-body .jbox-icon').css('top','55px');
			});
			$("#name").focus();
			$("#inputForm").validate({
				submitHandler: function(form){
					loading('正在提交，请稍等...');
					form.submit();
				},
				errorContainer: "#messageBox",
				errorPlacement: function(error, element) {
					$("#messageBox").text("输入有误，请先更正。");
					if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-append")){
						error.appendTo(element.parent().parent());
					} else {
						error.insertAfter(element);
					}
				}
			});
		});
		$(function() {
			(function ($) {
				var Budget = function () {}
				Budget.prototype.collect = function (e) {
					var sum = 0;
					var td = $(this).parent();
					var tr = td.parent();
					var fees = tr.find('.fee');
					fees.each(function () {
						sum = Number($(this).val())+sum;
					})
					$(this).parent().parent().find('.aggregate').val(sum);
				}
				$('.fee').on('change',Budget.prototype.collect);
				$('.fee').on('mouseleave',Budget.prototype.collect);

			})(jQuery);
		})
		function page(n,s){
			$("#pageNo").val(n);
			$("#pageSize").val(s);
			$("#searchForm").submit();
        	return false;
        }
	</script>

</head>
<body>
	<ul class="nav nav-tabs">
		<li class="active"><a href="${ctx}/oa/budget/listBudgetEdit">预算编辑</a></li>
	</ul>
	<form:form id="searchForm" modelAttribute="budget" action="${ctx}/oa/budget/listBudgetEdit" method="post" class="breadcrumb form-search">
		<label>项目名称：&nbsp;</label><form:input path="title" htmlEscape="false" maxlength="50" class="input-medium" placeholder="请输入项目名称"/>
		<input id="pageNo" name="pageNo" type="hidden" value="${page.pageNo}"/>
		<label>预算年度：&nbsp;</label>
		<input id="annual" name="annual" type="text" readonly="readonly" maxlength="20" class="required input-medium Wdate"
			   value="${budget.annual}" onclick="WdatePicker({dateFmt:'yyyy',isShowClear:true});"/>
		<label>处室：&nbsp;</label>
		<sys:treeselect id="office" name="office.id" value="${office.id}" labelName="office.name" labelValue="${budget.office.name}"
						title="处室" url="/sys/office/treeData?type=2" cssClass="required recipient" cssStyle="width:150px"
						allowClear="true" notAllowSelectParent="true" smallBtn="false"/>
		<input id="pageSize" name="pageSize" type="hidden" value="${page.pageSize}"/>&nbsp;
		<input id="btnSubmit" class="btn btn-primary" type="submit" value="查询"/>
		<input id="btnExport" class="btn btn-primary" type="button" value="导出"/>

	</form:form>
	<sys:message content="${message}"/>
	<div id="div_echart" style="width: 100%;height:400px;"></div>
	<div id="tableDiv">
	<form:form id="inputForm" modelAttribute="budget" action="${ctx}/oa/budget/saveBatch" method="post" class="form-horizontal">
		<table id="contentTable" class="table table-striped table-bordered table-condensed">
		<thead><tr>
			<th class="tb1th">项目名称</th>
			<th>预算年度</th>
			<th class="tb1th">所属处室</th>
			<th class="tb1th">项目分类</th>
			<th class="tb1th">所属项目</th>
			<th>总计（万元）</th>
			<c:forEach items="${page.list[0].subjectList}" var="budget" step="1" varStatus="status">
				<th>
						[${budget.code}]${budget.name}（万元）
				</th>
			</c:forEach>
			<th class="tb1th">申请时间</th><shiro:hasPermission name="oa:budget:edit"><th>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;操作&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th></shiro:hasPermission></tr></thead>
		<tbody>
		<c:forEach items="${page.list}" var="budget" varStatus="status1">
			<input name="budgets[${status1.index}].id" value="${budget.id}" type="hidden">
			<tr>
				<td><a href="${ctx}/oa/budget/form?id=${budget.id}">${budget.title}</a></td>
				<td>${budget.annual}</td>
				<td>${budget.office.name}</td>
				<td>
					<sys:treeselect id="classify${status1.index}" name="budgets[${status1.index}].classify.id" value="${budget.classify.id}" labelName="classify.name" labelValue="${budget.classify.name}"
									title="项目分类" url="/sys/classify/treeData?type=2" cssClass="required recipient" cssStyle="width:150px"
									notAllowSelectParent="true" smallBtn="false"/>
				</td>
				<td>
					<sys:treeselect id="category${status1.index}" name="budgets[${status1.index}].category.id" value="${budget.category.id}" labelName="category.name" labelValue="${budget.category.name}"
									title="所属项目" url="/sys/category/treeData?type=2" cssClass="required recipient" cssStyle="width:150px"
									notAllowSelectParent="true" smallBtn="false"/>
				</td>
				<td>
					<input  name="budgets[${status1.index}].aggregate"  class="input-small aggregate" readonly value="<fmt:formatNumber type="number" maxFractionDigits="4" value="${budget.aggregate}"></fmt:formatNumber>">
				</td>
				<c:forEach items="${budget.subjectList}"  step="1" varStatus="status">
					<td >
						<input class="input-small" name="budgets[${status1.index}].subjectList[${status.index}].id"  value="${budget.subjectList[status.index].id}" type="hidden">
						<input class="input-small fee" name="budgets[${status1.index}].subjectList[${status.index}].money" type="positiveDecimal" value="<fmt:formatNumber type="number" maxFractionDigits="4" value="${budget.subjectList[status.index].money}"></fmt:formatNumber>">
					</td>
				</c:forEach>
				<td><fmt:formatDate value="${budget.createDate}" type="both" pattern="yy-MM-dd"/></td>
				<shiro:hasPermission name="oa:budget:edit">
					<td>
						<a href="${ctx}/oa/budget/form?id=${budget.id}">详情</a>
						<%--<a href="${ctx}/oa/budget/delete?id=${budget.id}" onclick="return confirmx('确认要删除该审批吗？', this.href)">删除</a>--%>
					</td>
				</shiro:hasPermission>
			</tr>
		</c:forEach>
		</tbody>
	</table>
	</div>
		<div class="pagination">${page}</div>
		<div class="form-actions">
	<shiro:hasPermission name="oa:budget:edit">
		<input id="btnSubmit2" class="btn btn-primary" type="submit" value="保存" onclick="$('#flag').val('yes')"/>&nbsp;
	</shiro:hasPermission>
	<input id="btnCancel" class="btn" type="button" value="返 回" onclick="history.go(-1)"/>
	</div>
	</form:form>
	<script>
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('div_echart'));
		var subjects = ['预算金额(万元)','实际金额(万元)'];
		var classifyArray = [];
		var classifies = [];
		var classifyBudgetMoney = [];
		var realSpendMoney = [0,0,0,0,0,0];
		// 指定图表的配置项和数据
		option = {
			title : {
			},
			tooltip : {
				trigger: 'axis'
			},
			legend: {
				data:subjects
			},
			toolbox: {
				show : true,
				feature : {
					dataView : {show: true, readOnly: false},
					magicType : {show: true, type: ['line', 'bar']},
					restore : {show: true},
					saveAsImage : {show: true}
				}
			},
			calculable : true,
			xAxis : [
				{
					type : 'category',
					data : classifyArray
				}
			],
			yAxis : [
				{
					type : 'value'
				}
			],
			series : [
				{
					name:'预算金额(万元)',
					type:'bar',
					data:classifyBudgetMoney
				},
				{
					name:'实际金额(万元)',
					type:'bar',
					data:realSpendMoney
				}
			]
		};

		$.ajax({
			url:"${ctx}/sys/classify/classifyJson?annual="+${budget.annual},
			success:function(result){
				if(result.code == '1000'){
					classifies = result.content.retClassifies;
					for(i = 0;i<classifies.length;i++){
						var classify = classifies[i];
						classifyArray.push(classify.name);
						classifyBudgetMoney.push(classify.budgetMoney);
					}

					budgetAggregate = result.content.budgetAggregate;
					for(i = 0;i<budgetAggregate.length;i++){
						var budget = budgetAggregate[i];
						var budgetClassify = budget.classify;
						for(j = 0 ;j<classifies.length;j++){
							var c = classifies[j];
							if(budgetClassify.id == c.id){
								realSpendMoney.splice(j,1,Number(budget.aggregate));
							}
						}
					}
					myChart.setOption(option);

				}else{
					alert(result.content)
				}
			}
		});
		// 使用刚指定的配置项和数据显示图表。
	</script>
</body>

</html>
